<script setup>
import { RouterView, RouterLink } from 'vue-router'
import { getAllClass } from '@/api/home.js'
import { onMounted, ref } from 'vue'
import {
  Search,
  ShoppingCart,
  Comment,
  QuestionFilled,
  ElemeFilled,
  ElementPlus,
  Handbag,
  Star,
  ShoppingTrolley
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user.js'
import { useCartStore } from '@/stores/cartList.js'
defineOptions({
  name: 'AppLayout'
})
const cartListStore = useCartStore()
cartListStore.setcartList()
const userStore = useUserStore()

const searchItems = ref('')
const data = ref([])

onMounted(async () => {
  const res = await getAllClass()
  data.value = res.result
})
const navbar = ref(null)
onMounted(() => {
  window.addEventListener('scroll', () => {
    if (!navbar.value) return
    if (window.scrollY > 72) {
      navbar.value.style.position = 'fixed'
      navbar.value.style.top = 0
    } else navbar.value.style.position = 'static'
  })
})
const logout = () => {
  ElMessageBox.confirm('确定要退出登陆吗', '温馨提示', {
    confirmButtonText: '退出',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => userStore.removeUserInfo())
}
</script>

<template>
  <ul
    class="d-flex header p-3 list-unstyled justify-content-end align-items-center bg-dark"
  >
    <li class="mx-2" v-if="!userStore.userInfo.token">
      <router-link to="/login"> 请登录 </router-link>
    </li>
    <template v-else>
      <li class="mx-2">
        <a href="javascript:void(0)">{{ userStore.userInfo.account }}</a>
      </li>
      <el-divider direction="vertical" />
      <li class="mx-2">
        <a href="javascript:void(0)" @click="logout">退出登录</a>
      </li>
    </template>
    <el-divider direction="vertical" />

    <li class="mx-2">
      <a href="javascript:void(0)">我的订单</a>
    </li>
    <el-divider direction="vertical" />

    <li class="mx-2">
      <a href="javascript:void(0)">会员中心</a>
    </li>
  </ul>
  <nav
    ref="navbar"
    style="z-index: 50"
    class="navbar w-100 px-5 bg-white mx-auto"
  >
    <img
      src="@/assets/logo.png"
      width="200"
      height="90"
      class="navbar-brand"
      alt=""
      style="cursor: pointer"
      @click="$router.push('/home')"
    />
    <ul
      style="flex: auto"
      class="navbar-nav flex-row list-unstyled nav-justified"
    >
      <li class="nav-item">
        <router-link to="/home" class=""> 首页 </router-link>
      </li>
      <li class="nav-item" v-for="value in data" :key="value.id">
        <router-link :to="`/category/${value.id}`" class="">
          {{ value.name }}
        </router-link>
      </li>
    </ul>
    <div class="d-lg-flex d-none">
      <el-input
        placeholder="搜一搜"
        v-model="searchItems"
        :prefix-icon="Search"
      ></el-input>
      <el-dropdown size="large" :hide-on-click="false">
        <el-badge :value="cartListStore.cartList.length">
          <el-button :icon="ShoppingCart" circle size="large"></el-button>
        </el-badge>
        <template #dropdown>
          <div style="width: 500px"></div>
          <el-dropdown-item
            v-for="good in cartListStore.cartList"
            :key="good.id"
          >
            <dropGoods :good="good"></dropGoods>
          </el-dropdown-item>
          <div class="d-flex justify-content-between p-4 bg-light">
            <div>
              <h5 class="text-danger">
                {{ `￥${cartListStore.priceTotal}` }}
              </h5>
              <p class="text-secondary">
                {{ `共${cartListStore.numTotal}件商品` }}
              </p>
            </div>
            <el-button type="success" @click="$router.push('/cart')"
              >去购物车结算</el-button
            >
          </div>
        </template>
      </el-dropdown>
    </div>
  </nav>

  <section class="bg-light">
    <router-view></router-view>
  </section>

  <footer class="mt-3 pt-3">
    <div class="row text-secondary">
      <div class="col-6 col-md-3">
        <h3 class="text-center my-3">客户服务</h3>
        <div class="d-flex justify-content-center">
          <div class="mx-3 border w-25">
            <el-icon size="40" class="mx-auto d-block my-3"
              ><Comment
            /></el-icon>
            <span class="text-center d-block">在线客服</span>
          </div>
          <div class="mx-3 border w-25">
            <el-icon size="40" class="mx-auto d-block my-3">
              <QuestionFilled
            /></el-icon>
            <span class="text-center d-block">问题反馈</span>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <h3 class="text-center my-3">关注我们</h3>
        <div class="d-flex justify-content-center">
          <div class="mx-3 border w-25">
            <el-icon size="40" class="mx-auto d-block my-3"
              ><ElemeFilled
            /></el-icon>
            <span class="text-center d-block">公众号</span>
          </div>
          <div class="mx-3 border w-25">
            <el-icon size="40" class="mx-auto d-block my-3">
              <ElementPlus
            /></el-icon>
            <span class="text-center d-block">微博</span>
          </div>
        </div>
      </div>

      <div class="col-6 col-md-3">
        <h3 class="text-center my-3">下载App</h3>
        <div class="d-flex justify-content-center">
          <div class="mx-3">
            <img
              src="@/assets/rabbit_code.jpg"
              width="100"
              class="p-2 border"
              alt=""
            />
          </div>
          <div class="mx-3 w-50">
            <span class="text-center d-block">扫描二维码，立刻下载App</span>
            <button class="btn btn-outline-dark mx-auto d-block">
              立刻下载
            </button>
          </div>
        </div>
      </div>

      <div class="col-6 col-md-3">
        <h3 class="text-center my-3">服务热线</h3>
        <div class="d-flex justify-content-center">
          <div class="text-center">
            <h3>400-0000-000</h3>
            <p>周一至周日8:00-18:00</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-dark mt-5 p-5">
      <div class="d-flex justify-content-around text-white">
        <div class="d-flex align-items-center">
          <el-icon size="80" color="white"><Handbag /></el-icon>
          <h2 class="mx-2">价格亲民</h2>
        </div>
        <div class="d-flex align-items-center">
          <el-icon size="80" color="white"><Star /></el-icon>
          <h2 class="mx-2">物流快捷</h2>
        </div>
        <div class="d-flex align-items-center">
          <el-icon size="80" color="white"><ShoppingTrolley /></el-icon>
          <h2 class="mx-2">品质新鲜</h2>
        </div>
      </div>
      <hr class="text-white my-5" />
      <div>
        <ul
          class="d-flex header p-3 list-unstyled justify-content-center align-items-center"
        >
          <template
            v-for="(value, index) in [
              '关于我们',
              '帮助中心',
              '售后服务',
              '配送与验收',
              '商务合作',
              '搜索推荐',
              '友情链接'
            ]"
            :key="index"
          >
            <li class="">
              <a href="javascript:void(0)">{{ value }}</a>
            </li>
            <el-divider v-if="index !== 6" direction="vertical" />
          </template>
        </ul>
        <p class="text-center text-white">CopyRight © 小兔鲜儿</p>
      </div>
    </div>
  </footer>
</template>

<style scoped lang="scss">
.header a {
  text-decoration: none;
  color: rgb(173, 173, 173);
  transition: 0.5s;
  &:hover {
    color: rgba(3, 253, 32, 0.707);
  }
}

.navbar-nav .nav-item a {
  text-decoration: none;
  color: black;
}
.navbar-nav .nav-item .router-link-active {
  color: rgba(1, 139, 17, 0.707);
}
</style>
